<html>

	<head>
	
	<title>Ejemplos de Jquery</title>
	
	<!-- CSS GLOBAL -->
	<link rel="stylesheet" type="text/css" href="../css/reset.css" ></style>
	<link rel="stylesheet" type="text/css" href="../css/global.css" ></style>
	<link rel="stylesheet" type="text/css" href="css/main.css" ></style>

	

	<script type="text/javascript" src="../js/jquery-1.7.1.js" ></script>
	
	<script  type="text/javascript">
		
		
		//CREAMOS LAS FUNCIONES QUE NECESITEMOS
		
		$(document).ready(function(e){
		
			var i = 1;
		
			$('#container p').each(function(e){
			
				$("#selectParrafo").append("<option value="+i+">"+i+"</option>");
				i++;
			
			});
		
			$("#resaltar_parrafo").click(function(e){
			
				e.preventDefault();
				
				var contador = 1;
				var posicion = $("#selectParrafo").attr("value");
				$('#container p').removeClass("resaltado");
				
				$('#container p').each(function(e){
				
					if(contador==(parseInt(posicion))){
					$(this).addClass("resaltado");
					$('html,body').animate({
						scrollTop: $(this).offset().top
					}, 2000);
					}
					contador++;
				
				});
				
				
				
			
			});
		
		});
		
	
	</script>
	
	</head>
	
	
		<body>
		<div id="container" class="tipo1 redondeado sombra">
		<h1>Ejemplo sitema ayuda</h1>
	
		<select type="select" id="selectParrafo">
		</select>
		
		<input type="button" name="resaltar_parrafo" id="resaltar_parrafo" value="resaltar" />
		
				
				
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in risus augue, ut suscipit ante. Aliquam odio erat, imperdiet quis adipiscing eget, elementum non ligula. Morbi ac volutpat orci. Aenean tristique dolor sit amet felis porta pulvinar semper risus consectetur. Aliquam elementum venenatis lorem, sed tempor lorem aliquet sit amet. Vestibulum volutpat euismod est, sit amet vulputate justo dapibus sit amet. Sed mattis lacus massa. Suspendisse potenti. Aliquam erat volutpat. Etiam tortor ante, condimentum quis hendrerit ut, gravida ut quam.
		</p>
		<p>
		Morbi purus lectus, cursus placerat malesuada in, blandit eget erat. Integer lobortis tristique ipsum, sed dictum urna elementum in. Aliquam viverra erat sed enim posuere at accumsan diam vestibulum. Aenean sit amet nisi vitae enim rutrum lacinia. Morbi fringilla eleifend nisi sed luctus. Cras eros nunc, dictum eu fermentum id, congue a nulla. Mauris dapibus felis nec quam euismod laoreet.
		</p>
		<p>
		Etiam ultrices suscipit arcu id dapibus. Cras dictum neque at arcu malesuada bibendum. Sed in magna eget nisl sollicitudin consequat. Aliquam sollicitudin, nisi non sagittis fringilla, purus est feugiat odio, ac interdum dolor nisi non velit. Sed tortor risus, iaculis sit amet congue id, tincidunt quis enim. Phasellus quis mi quam. Vivamus facilisis condimentum metus non feugiat. Nunc consectetur porttitor felis in commodo.
		</p>
		<p>
		Donec posuere euismod tellus ut commodo. Cras at velit est, sit amet facilisis augue. Nulla lacus purus, faucibus a consequat eget, eleifend a urna. Duis consectetur nulla vel purus ullamcorper in vestibulum magna molestie. Integer elementum augue vel lectus commodo fringilla. Pellentesque vitae odio diam, a feugiat velit. Nullam cursus pulvinar libero, tristique interdum ligula rhoncus sed. Proin dui leo, sagittis vitae imperdiet vitae, dapibus in eros. Nam adipiscing, nibh at porta interdum, ante turpis molestie libero, sit amet bibendum massa arcu vel risus. Donec non erat sed odio eleifend auctor. Etiam leo diam, congue dapibus ullamcorper dignissim, eleifend ornare ligula. Aliquam tristique nulla at diam placerat congue. Vestibulum at leo eu neque aliquam lobortis convallis at metus. Sed tincidunt, purus at iaculis luctus, tellus ligula mollis sapien, ac placerat tellus lacus eu diam.
		</p>
		<p>
		Quisque pretium nisi eu turpis ultrices adipiscing. Donec sed augue non mauris luctus tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Cras orci ligula, eleifend quis molestie et, tincidunt quis nulla. Nunc elementum, mi vel ultricies ornare, nunc lacus lobortis erat, et faucibus nisl nisi eu metus. Vestibulum est nisi, convallis ut hendrerit vitae, tristique quis ipsum. Nunc eu metus nisl, scelerisque molestie nunc. Aenean sit amet odio at erat dapibus molestie vitae auctor magna.
		</p>
			
			<div id="ejercicios">
			<h3>Ejercicios propuestos:</h3>
				
				<ul>
					
				</ul>
			
			</div>
			
		</div>
		</body>
		
	
	
</html>